<template>
  <div>
    <input v-model="firstName" placeholder="输入 first name" />
    <input v-model="lastName" placeholder="输入 last name" />
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";

const firstName = ref("");
const lastName = ref("");

const fullName = computed(() => `${firstName.value} ${lastName.value}`);

watch(
  [firstName, lastName],
  ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
    console.log(
      `First Name changed from "${oldFirstName}" to "${newFirstName}"`
    );
    console.log(`Last Name changed from "${oldLastName}" to "${newLastName}"`);
  }
);
</script>
